<template>
<div>
  <!--<h1>当前求和为: {{sum}}</h1>-->
  <h1>当前求和为: {{sum}}</h1>
  <h3>当前求和的10倍: {{bigSum}}</h3>
  <h3>我是{{name}}, 我在{{school}}学习</h3>
  <h3 style="color:red">Person组件的总人数是: {{personList.length}}</h3>
  <select v-model.number="n">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <button @click="increment(n)">+</button>
  <button @click="decrement(n)">-</button>
  <button @click="incrementOdd(n)">当前求和为奇数再加</button>
  <button @click="incrementWait(n)">等一等再加</button>
</div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: "Count",
  data() {
    return {
      n: 1,  //用户选择的数字
      //sum: 0 //当前的和
    }
  },
  methods: {
    // increment() {
    //   this.sum += this.n
    // },
    // decrement() {
    //   this.sum -= this.n
    // },
    // incrementOdd(){
    //   if (this.sum % 2) {
    //     this.sum += this.n
    //   }
    // },
    // incrementWait() {
    //   setTimeout(()=>{
    //     this.sum += this.n
    //   }, 500)
    // }

    // increment() {
    //   this.$store.commit('ADD', this.n)
    // },
    // decrement() {
    //   this.$store.commit('SUBTRACT', this.n)
    // },
    // incrementOdd() {
    //   this.$store.dispatch('addOdd', this.n)
    // },
    // incrementWait() {
    //   this.$store.dispatch('addWait', this.n)
    // }

    //借助mapAction生成：increment、decrement(对象形式)
    ...mapMutations('countAbout',{increment: 'ADD', decrement: 'SUBTRACT'}),

    //借助mapActions生成: incrementOdd、incrementWait(对象形式)
    ...mapActions('countAbout',{incrementOdd: 'addOdd', incrementWait: 'addWait'})
  },
  computed: {
    //借助mapState生成计算属性(数组写法)
    //...mapState(['sum','school','name', 'personList']),
    //借助mapState生成计算属性(对象写法)
    //...mapState({sum: 'sum', school: 'school', name: 'name'}),
    //...mapGetters(['bigSum'])
    ...mapState('countAbout', ['sum', 'school', 'name']),
    ...mapGetters('countAbout', ['bigSum']),
    ...mapState('personAbout',["personList"])
  }
}
</script>

<style scoped>
button{
  margin-left: 5px;
}
</style>
